<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书详情</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入FontAwesome图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: Arial, sans-serif;
            margin-bottom: 200px;
        }

        .container-fluid {
            margin-top: 50px;
        }

        .book-card {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 40px;
        }

        .book-details h2 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 20px;
        }

        .book-details p {
            font-size: 1.1rem;
            margin: 5px 0;
        }

        .book-details p strong {
            color: #007bff;
        }

        .comment-section {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-top: 30px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: #ffffff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }

        .comment-section h3 {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 20px;
        }

        .comment-form textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-size: 1rem;
            resize: none;
            margin-bottom: 10px;
        }

        .comment-form input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
        }

        .comment-form input[type="submit"]:hover {
            background-color: #0056b3;
        }

        .comment-list {
            margin-top: 20px;
        }

        .comment-list .list-group-item {
            background-color: #f9f9f9;
            border: none;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: flex-start; /* 让评论内容左对齐，去除居中效果 */
        }

        .comment-list .list-group-item i {
            font-size: 30px;
            color: #007bff;
            margin-right: 15px;
        }

        .comment-list .list-group-item div {
            flex-grow: 1; /* 让评论内容占据剩余空间 */
        }

        .comment-list .list-group-item strong {
            font-size: 1.2rem;
            color: #333;
        }

        .comment-list .list-group-item span {
            font-size: 1rem;
            color: #555;
        }

        .comment-list .list-group-item small {
            font-size: 0.9rem;
            color: #aaa;
            margin-top: 5px;
            display: block;
        }


        .btn-secondary {
            background-color: #6c757d;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
        }

        .return-btn {
            margin-top: 20px;
            display: inline-block;
            text-align: center;
        }

        /* 评论框底部固定但不挡住列表 */
        .content-wrapper {
            padding-bottom: 200px;
        }

    </style>
</head>

<body>

<div class="container-fluid content-wrapper">
    <div class="row">
        <div class="col-md-12">
            <!-- 图书详情卡片 -->
            <div class="book-card">
                <h2 class="book-details">${book.name}</h2>
                <p><strong>作者：</strong>${book.author}</p>
                <p><strong>评分：</strong>${book.score}</p>
                <p><strong>数量：</strong>${book.count}</p>
                <p><strong>ISBN：</strong>${book.ISBN}</p>
                <p><strong>分类：</strong>${book.category}</p>

                <!-- 返回图书列表按钮 -->
                <div class="return-btn">
                    <a href="listBooksServlet" class="btn btn-secondary">返回图书列表</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论区域 -->
    <h3>留言评论区</h3>
    <ul class="comment-list list-group">
        <c:forEach items="${comments}" var="comment">
            <li class="list-group-item">
                <i class="fa-solid fa-user-circle"></i>
                <div>
                    <strong>${comment.getUsername()}:</strong>
                    <span>${comment.message}</span>
                    <small class="text-muted">${comment.date}</small>
                </div>
                <!--删除按钮 -->
                <form action="delCommentServlet" method="get" class="d-inline">
                    <input type="hidden" name="comment_id" value="${comment.id}">
                    <input type="hidden" name="book_id" value="${book.id}">
                    <c:if test="${sessionScope.user.type==1 || sessionScope.user.id==comment.id}">
                        <button type="submit" class="btn btn-danger btn-sm">删除</button>
                    </c:if>
                </form>
            </li>
        </c:forEach>
    </ul>

    <!-- 评论提交区域 -->
    <div class="comment-section">
        <form class="comment-form" action="commentServlet" method="post">
            <input type="hidden" name="user_id" value="${user.id}">
            <input type="hidden" name="book_id" value="${book.id}">
            <textarea name="message" placeholder="请输入你的留言评论"></textarea><br>
            <input type="submit" value="提交评论">
        </form>
    </div>
</div>

</body>

</html>
